<template>
	<view class="flow">
		<view class="title">
			111
		</view>
		<view id="trajectory">
			<view id="move1"></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		}
	}
</script>

<style scoped lang='scss'>
	/*  #trajectory:after{
    content:"";
    position: absolute;
    top: 0;
    right: 0;
    height: 200rpx;
    width: 4rpx;
    background-color: red;
  } */
	#trajectory:before {
		content: "";
		position: absolute;
		bottom: 0;
		right: -200rpx;
		height: 4rpx;
		width: 200rpx;
		background-color: red;
	}

	#trajectory {
		width: 200rpx;
		height: 200rpx;
		/* background-color: #ddd; */
		border-image: linear-gradient(to right, rgb(65, 109, 228), rgb(247, 162, 25)) 4;
		border-top: 4rpx solid;
		border-right: 4rpx solid;
		position: relative;
		border-top-right-radius: 20rpx;
	}

	/* 定义所有球的起始位置和属性 */
	#move1 {
		left: -22px;
		top: -22px;
		width: 5px;
		height: 5px;
		font-size: 12px;
		border-radius: 50%;
		position: absolute;
		background-color: #fff;
		border: 0.0125rem solid;
	}

	/* 定义动画 */
	/* 起点：0 0  */
	/* 25%：100px 0  */
	/* 65%：100px 100px  */
	/* 终点：200px 100px  */
	@keyframes move1X {
		0% {
			left: 0;
		}

		25% {
			left: 100px;
		}

		65% {
			left: 100px;
		}

		100% {
			left: 200px;
		}
	}

	@keyframes move1Y {
		0% {
			top: 0;
		}

		25% {
			top: 0;
		}

		65% {
			top: 100px;
		}

		100% {
			top: 100px;
		}
	}

	/* 设置动画运动属性 */
	/* animation:动画名称  动画时长   速度曲线   延迟时间   重复次数  动画方向  执行完毕时状态; */
	/* 修改延迟时间（贝塞尔曲线后面的那个秒数），每个球的间隔要相同 */
	#move1 {
		animation: move1X 3s cubic-bezier(0, 1.12, 1, -0.15) -1s infinite, move1Y 3s cubic-bezier(0, 1.12, 1, -0.15) -1s infinite;
	}

	.flow {
		.flow_svg {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;

			.svg_item {
				width: 50%;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
